<script setup lang="ts">
// 更新日志弹窗
import {computed, ref, watch} from 'vue';
import { getVersionListAction } from '@/service/api';
import { localStg } from '@/utils/storage';

interface Props {
  show: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  show: false
});

const emit = defineEmits(['update:show', 'saveChapterName']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

watch(
  () => props.show,
  value => {
    if (value) {
      getUpdateLogData();
    }
  }
);

const versionList = ref<any[]>([]);

// 获取升级记录列表
async function getUpdateLogData() {
  const params: any = {
    moduleId: localStg.get('moduleId') || 1
  };
  const { data, error } = await getVersionListAction(params);
  if (!error) {
    console.log('data: ', data);
    data &&
      data.forEach((item: any) => {
        const timeList: string[] = item.versionUpdateTime.split('-');
        item.updateYear = timeList[0];
        item.updateMonth = timeList[1];
        item.updateDay = timeList[2];

        item.optimizeContent =
          item.optimizeContent && item.optimizeContent.length > 0 ? item.optimizeContent.split('\n') : [];
        item.repairContent = item.repairContent && item.repairContent.length > 0 ? item.repairContent.split('\n') : [];
      });
    versionList.value = data;
    /**
     * optimizeContent: "1. 更新\n2. 更新22"————新增与优化
     * repairContent: "1. 更新\n2. 更新244\n3. zzq"————修复
     * versionNum: "V1.32"
     * versionUpdateTime: "2024-09-14"
     */
  }
}

// 取消
function closeModal() {
  console.log('close');
  modalShowValue.value = false;
}
</script>

<template>
  <NModal
    v-model:show="modalShowValue"
    preset="card"
    title="更新日志"
    class="w-1000px"
    :mask-closable="false"
    @close="closeModal"
  >
    <NScrollbar class="max-h-75vh">
      <div class="flex flex-col mt-20px mb-20px">
        <div v-for="(item, index) in versionList" :key="index">
          <div class="flex gap-x-8px">
            <div class="font-size-18px color-#836fff font-bold">{{ item.updateYear }}</div>
            <div class="flex-col items-center">
              <img src="@/assets/imgs/icon-time.png" alt="" width="30" height="30">
              <div v-if="index !== versionList.length - 1" class="w-6px flex-1 bg-#836fff"></div>
            </div>
            <div class="flex items-baseline">
              <span class="font-size-22px color-#333 font-bold line-height-30px">{{ item.updateMonth }}月&nbsp;</span>
              <span class="font-size-16px color-#333 font-bold line-height-30px">{{ item.updateDay }}日</span>
            </div>
            <div class="mb-5px mt-5px ml-10px mr-30px flex-col flex-1 border-rd-10px bg-#f2f0ff pb-5px pl-20px pr-20px pt-5px">
              <div class="font-size-18px color-#836fff line-height-30px">版本号：{{ item.versionNum }}</div>
              <div v-if="item.optimizeContent.length > 0" class="mt-15px flex flex-col gap-y-8px">
                <div class="text-14px text-gray-500">新增与优化：</div>
                <div class="text-14px text-gray-500">
                  <div v-for="(item1, index1) in item.optimizeContent" :key="index1" class="flex items-center">
                    <div class="mr-8px h-8px w-8px border-rd-4px bg-#836fff"></div>
                    <span>{{ item1 }}</span>
                  </div>
                </div>
              </div>
              <div v-if="item.repairContent.length > 0" class="mt-15px flex flex-col gap-y-8px">
                <div class="text-14px text-gray-500">修复：</div>
                <div class="text-14px text-gray-500">
                  <div v-for="(item2, index2) in item.repairContent" :key="index2" class="flex items-center">
                    <div class="mr-8px h-8px w-8px border-rd-4px bg-#836fff"></div>
                    <span>{{ item2 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </NScrollbar>
  </NModal>
</template>

<style scoped lang="scss">
.center-line {
  background-color: #836fff;
}
</style>
